<template>
  <div class="card" :style="cardStyle">
    <div class="image" :style="imageStyle">
      <img v-lazy="image">
      <div class="top">
        <slot name="top"/>
      </div>
      <div class="bottom">
        <slot name="bottom"/>
      </div>
    </div>
    <div class="column-content" v-if="direction === 'column'">
      <slot>{{ title }}</slot>
    </div>
    <div class="row-content" v-else>
      <div class="row-content-left">
        <slot name="leftContent">
          <div class="title">{{ title }}</div>
          <div class="subTitle">{{ subTitle }}</div>
        </slot>
      </div>
      <div class="row-content-right">
        <slot name="row-right"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    direction: {
      type: String,
      default: 'column' // column row
    },
    image: [String],
    imageWidth: {
      type: Number,
      default: 100
    },
    imageHeight: {
      type: Number,
      default: 100
    },
    title: [String, Number],
    subTitle: [String, Number]
  },
  computed: {
    imageStyle() {
      let style = {
        width: `${this.imageWidth}px`,
        height: `${this.imageHeight}px`
      }
      return style
    },
    cardStyle() {
      return {
        'flex-direction': this.direction,
        height: this.direction === 'column' ? `auto` : `${this.imageHeight}px`
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/style/mixins.less';
@import '~@/style/variable.less';
.card{
  display: flex;
  align-items: center;
  padding: 0 3px;
  box-sizing: border-box;
  .image{
    position: relative;
    .top,.bottom{
      position: absolute;
      color: @text-color-white;
      // right: 10px;
      font-size: @font-size-mini;
      width: 100%;
      i{
        font-size: 1em;
      }
    }
    .top{
      top: 5px;
      text-align: right;
    }
    .bottom{
      bottom: 5px;
    }
    img{
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }
  .column-content,.row-content{
    margin-top: 5px;
    text-align: center;
    line-height: 1.4;
    font-size: @font-size-small;
  }
  .row-content{
    flex: 1;
    height: 100%;
    text-align: left;
    padding-left: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    flex-direction: column;
    line-height: 1.7;
    display: flex;
    flex-direction: row;
    .title,.subTitle{
      width: 100%;
      .ellipsis();
    }
    .title{
      font-weight: bold;
    }
    .row-content-left,
    .row-content-right{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .row-content-left{
      flex: auto;
      overflow: hidden;
      align-items: flex-start;
    }
    .row-content-right{
      align-items: right;
      >i {
        font-size: 1.2em;
      }
    }
  }
  .column-content{
    width: 100%;
    .ellipsis_2();
  }
}
</style>